<template>
  <div :class="$style.wrapper">
    <div :class="$style.topoWrapper">
      <ps-topo :view-id="viewId"></ps-topo>
    </div>
    <div :class="$style.statePreview">
      <div :class="$style.viewItem">
        <ps-state-overview></ps-state-overview>
      </div>
    </div>
  </div>
</template>
<script>
import PsTopo from './../../../default/components/topo/PsTopo.vue';
import PsStateOverview from './../../../default/components/area-state/PsStateOverview.vue';
import api from '../../../common/js/api';
import { mapGetters } from 'vuex';

export default {
  name: 'PsSection',
  components: {
    PsTopo,
    PsStateOverview
  },
  data () {
    return {
      viewId: null
    };
  },
  computed: {
    ...mapGetters('resource', [
      'currentResource'
    ])
  },
  watch: {
    currentResource: {
      immediate: true,
      handler (res) {
        if (res) {
          api.post('resourceUIService.getResourceById', res.id).then(ret => {
            this.viewId = ret.data.values.view.viewId;
          });
        }
      }
    }
  }
};
</script>
<style lang="scss" module>
@import './../../../style/default/ps-section.scss';
</style>
